/* * @Author: zhouc * @Date: 2024-04-19 09:58:28 * @Function: 班级信息 * @Last
Modified by: zhouc * @Last Modified time: 2024-04-24 22:51:42 */
<template>
  <div class="class-evaluation-container">
    <TimePicker
      @timeChange="timeChange"
      :customSet="isRouter"
      :customParams="customParams"
    />

    <div class="class-card">
      <div class="card-box">
        <div class="left">
          <div class="class-name">{{ user.class }}</div>
          <div class="name">班主任：{{ user.teacherName || "-" }}</div>
        </div>
        <div class="right">
          <div class="score">{{ user.score?.toLocaleString() || "-" }}</div>
          <div class="text">总评得分</div>
        </div>
      </div>
    </div>

    <div class="tip">
      <div
        @click="() => router.push('/evaluationCriteria')"
        class="evaluation-tip"
      >
        <img :src="require('@/assets/img/tip_icon.png')" />
        <text>打分准则</text>
      </div>
      <div
        class="export"
        @click="
          () =>
            router.push(
              `/exportDetail?startTime=${rec.startTime}&endTime=${rec.endTime}&grade=${routerGrade}&classes=${routerClass}&gradeId=${routerGradeId}&classesId=${routerClassId}`
            )
        "
      >
        <img :src="require('@/assets/img/export.png')" />
        <text>导出明细</text>
      </div>
    </div>

    <van-list
      v-model:loading="rec.loading"
      :finished="rec.finished"
      :immediate-check="false"
      finished-text="暂无数据"
      loading-text="正在加载中......"
      @load="onLoad"
    >
      <div
        class="evaluation-item"
        v-for="item in rec.list"
        :key="item"
        @click="() => handleToEvaluationDetail(item)"
      >
        <span :class="`score ${item.behaviorScore > 0 ? 'green' : ''}`">{{
          item.behaviorScore > 0 ? "+" + item.behaviorScore : item.behaviorScore
        }}</span>
        <div class="result">
          <div class="top">{{ item.behaviorName }}</div>
          <div class="bottom">{{ item.behaviorDetail }}</div>
        </div>
        <div class="time" v-if="item.createTime">
          {{ dayjs(item.createTime).format("YY-MM-DD HH:mm:ss") }}
        </div>
        <img
          v-if="item.status === 'CANCEL'"
          class="delete-img"
          :src="require('@/assets/img/delete.png')"
        />
      </div>
    </van-list>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref, nextTick } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
import TimePicker from "@/components/time-picker/index.vue";
import {
  queryInspectionScoreDetail,
  // queryInspectionScoreByClass,
  queryAllTeacher,
} from "@/service/modules/evaluation";
import LocalCache from "@/utils/cache";
import dayjs from "dayjs";

const route = useRoute();

document.title = "班级评比";

const { name, isAdmin, jobList } = LocalCache.getSession("userInfo");
const gradeList = LocalCache.getSession("gradeList");

const rec = reactive<any>({
  list: [],
  loading: false,
  finished: false,
});

const user = ref<any>({});
const routerGrade = ref<any>("");
const routerClass = ref<any>("");
const routerGradeId = ref<any>("");
const routerClassId = ref<any>("");
const isRouter = ref<any>(false);
const customParams = reactive<any>({});
onMounted(() => {
  nextTick(async () => {
    if (isAdmin) {
      routerGrade.value = route.query.grade;
      routerClass.value = route.query.classes;
      routerGradeId.value = route.query.gradeId;
      routerClassId.value = route.query.classId;
      isRouter.value = Boolean(route.query.isRouter);

      if (isRouter.value) {
        customParams.year = route.query.year;
        customParams.semesterValue = route.query.semesterValue;
        customParams.month = route.query.month;
        customParams.weekIndex = route.query.weekIndex;
      }

      user.value.class = route.query.classes;

      let classId = "";
      gradeList.forEach((item) => {
        item.children.forEach((item2) => {
          if (item2.unitName === route.query.classes) {
            classId = item2.unitId;
          }
        });
      });

      queryAllTeacher({
        classId,
      }).then((res) => {
        if (res.code === 0) {
          user.value.teacherName = res.data?.teacherName;
        }
      });
    } else {
      if (jobList) {
        const curClassId = LocalCache.getCache("curClassId") || "";
        let bzr = jobList.filter((item: any) => item.classId === curClassId);
        if (bzr.length === 0) {
          bzr = jobList.filter((item: any) => item.jobId === "JSBJZW_1");
        }
        if (bzr.length > 0) {
          const gradeFlatList = LocalCache.getSession("gradeFlatList");
          user.value.teacherName = name;
          user.value.class = bzr[0].className;
          const list = gradeFlatList.filter(
            (item: any) => item.className === bzr[0].className
          );
          routerGrade.value = list[0].gradeName;
          routerClass.value = list[0].className;
        }
      }
    }
  });
});

let isFirst = true;
const onLoad = async (selectTime: any) => {
  const { startTime, endTime } = selectTime;

  rec.startTime = startTime;
  rec.endTime = endTime;

  const grade = route.query.grade;
  const classes = route.query.classes;
  const gradeId = route.query.gradeId;
  const classId = route.query.classId;
  let result = {};
  if (grade && classes) {
    if (isFirst) {
      isFirst = false;
      result = {
        pageNum: 1,
        pageSize: 9999,
        gradeNames: [grade],
        classes: [classes],
        gradeIds: [gradeId],
        classIds: [classId],
        startTime: route.query.startTime || startTime,
        endTime: route.query.endTime || endTime,
      };
    } else {
      result = {
        pageNum: 1,
        pageSize: 9999,
        gradeNames: [grade],
        classes: [classes],
        gradeIds: [gradeId],
        classIds: [classId],
        startTime,
        endTime,
      };
    }
  } else {
    result = {
      startTime,
      endTime,
      gradeNames: [routerGrade.value],
      classes: [routerClass.value],
      gradeIds: [gradeId],
      classIds: [classId],
      pageNum: 1,
      pageSize: 9999,
    };
  }

  rec.loading = true;
  const { code, data } = await queryInspectionScoreDetail(result);

  let rows: any[] = [];

  if (code === 0 && Object.keys(data).length > 0) {
    try {
      user.value.score = data.scoreVO?.totalScore;

      Object.keys(data?.behaviorAndCategoryAndDescMap || {})?.forEach((key) => {
        Object.keys(data?.behaviorAndCategoryAndDescMap[key] || {})?.forEach(
          (key2) => {
            rows = [...data?.behaviorAndCategoryAndDescMap[key][key2], ...rows];
          }
        );
      });
      rec.list = rows;
    } finally {
      // 加载状态结束
      rec.loading = false;
      rec.finished = true;
    }
  }
};

// let gradeAndClassFlat: any;
const timeChange = (selectTime: any) => {
  // const gradeAndClass = selectTime.grade.map((item: any) => {
  //   if (item.children.length === 0) {
  //     return {
  //       gradeName: item.unitName,
  //       gradeId: item.unitId,
  //       className: "",
  //       classId: "",
  //     };
  //   }

  //   return item.children.map((subItem: any) => {
  //     const result: any = {};
  //     result.gradeName = item.unitName;
  //     result.gradeId = item.unitId;
  //     result.className = subItem.unitName;
  //     result.classId = subItem.unitId;
  //     return result;
  //   });
  // });
  // gradeAndClassFlat = gradeAndClass.flat();

  rec.list = [];

  onLoad({
    startTime: selectTime.startTime,
    endTime: selectTime.endTime,
  });
};

const handleToEvaluationDetail = (item: any) => {
  LocalCache.setSession("recoreDetail", item);

  router.push(
    `/recoreDetail${
      user.value.teacherName ? "?teacherName=" + user.value.teacherName : ""
    }`
  );
};
</script>

<style lang="less" scoped>
.class-evaluation-container {
  width: 100%;
  min-height: 100vh;
  padding: 0 0 50px;
  background-color: #f7f7f7;

  .class-card {
    height: 116px;
    padding: 4px 16px 16px 16px;
    background-color: #fff;

    .card-box {
      height: 100%;
      background-image: url(~@/assets/img/card_bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border-radius: 10px;
      padding: 0 16px;
      color: #fff;
      display: flex;
      justify-content: space-between;

      .left {
        margin-top: 24px;

        .class-name {
          font-size: 16px;
          font-weight: 500;
          line-height: 22px;
        }

        .name {
          font-size: 12px;
          line-height: 17px;
          margin-top: 8px;
        }
      }

      .right {
        margin-top: 23px;

        .score {
          line-height: 29px;
          font-size: 24px;
          font-weight: 700;
        }

        .text {
          line-height: 17px;
          font-size: 12px;
          margin-top: 4px;
        }
      }
    }
  }

  .tip {
    padding: 15px 16px 0 16px;
    font-size: 14px;
    color: #919599;
    display: flex;
    justify-content: space-between;

    .evaluation-tip {
      display: flex;
      align-items: center;

      img {
        margin-right: 4px;
        width: 16px;
        height: 16px;
      }

      text {
        line-height: 18px;
      }
    }

    .export {
      font-size: 12px;
      color: #3e77fa;
      display: flex;
      align-items: center;

      img {
        margin-right: 7px;
        width: 12px;
        height: 12px;
      }

      text {
        line-height: 14px;
      }
    }
  }

  .evaluation-item {
    position: relative;
    background-color: #fff;
    margin: 16px 16px 0 16px;
    height: 72px;
    border-radius: 10px;
    padding: 20px 16px;
    display: flex;
    align-items: center;

    .score {
      width: 38px;
      height: 38px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ff5959;
      border: 1px solid #ff5959;
      border-radius: 50%;
      font-size: 14px;
      font-weight: 700;
    }

    .green {
      border: 1px solid #00c294;
      color: #00c294;
    }

    .result {
      margin-left: 12px;
      color: #303233;
      line-height: 14px;
      font-size: 14px;
      max-width: 180px;

      .top {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .bottom {
        margin-top: 6px;
        color: #aaaeb2;
        line-height: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .time {
      position: absolute;
      top: 21px;
      right: 16px;
      color: #aaaeb2;
      line-height: 12px;
      font-size: 12px;
    }

    .delete-img {
      position: absolute;
      top: 15px;
      right: 16.74px;
      width: 50px;
      height: 50px;
    }
  }
}
</style>
